<template>
  <div class="mainContent">
    <h1>输入框</h1>
    <hr>
    <span>基础框</span>
    <el-input v-model="input0" placeholder="请输入内容"></el-input>
    <el-input
      placeholder="请输入内容"
      v-model="input1"
      :disabled="true">
    </el-input>
    <hr>
    <span>带图标的</span>
    <div class="demo-input-suffix">
      属性方式：
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input2">
      </el-input>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input21">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
        placeholder="请选择日期"
        v-model="input22">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
        placeholder="请输入内容"
        v-model="input23">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <h1>图标库</h1>
    <ul class="icon-list">
      <li><span><i class="el-icon-upload"></i><span class="icon-name">el-icon-upload</span></span></li>
      <li><span><i class="el-icon-error"></i><span class="icon-name">el-icon-error</span></span></li>
      <li><span><i class="el-icon-success"></i><span class="icon-name">el-icon-success</span></span></li>
      <li><span><i class="el-icon-warning"></i><span class="icon-name">el-icon-warning</span></span></li>
      <li><span><i class="el-icon-sort-down"></i><span class="icon-name">el-icon-sort-down</span></span></li>
      <li><span><i class="el-icon-sort-up"></i><span class="icon-name">el-icon-sort-up</span></span></li>
      <li><span><i class="el-icon-arrow-left"></i><span class="icon-name">el-icon-arrow-left</span></span></li>
      <li><span><i class="el-icon-circle-plus"></i><span class="icon-name">el-icon-circle-plus</span></span></li>
      <li><span><i class="el-icon-circle-plus-outline"></i><span
        class="icon-name">el-icon-circle-plus-outline</span></span></li>
      <li><span><i class="el-icon-arrow-down"></i><span class="icon-name">el-icon-arrow-down</span></span></li>
      <li><span><i class="el-icon-arrow-right"></i><span class="icon-name">el-icon-arrow-right</span></span></li>
      <li><span><i class="el-icon-arrow-up"></i><span class="icon-name">el-icon-arrow-up</span></span></li>
      <li><span><i class="el-icon-back"></i><span class="icon-name">el-icon-back</span></span></li>
      <li><span><i class="el-icon-circle-close"></i><span class="icon-name">el-icon-circle-close</span></span></li>
      <li><span><i class="el-icon-date"></i><span class="icon-name">el-icon-date</span></span></li>
      <li><span><i class="el-icon-circle-close-outline"></i><span class="icon-name">el-icon-circle-close-outline</span></span>
      </li>
      <li><span><i class="el-icon-caret-left"></i><span class="icon-name">el-icon-caret-left</span></span></li>
      <li><span><i class="el-icon-caret-bottom"></i><span class="icon-name">el-icon-caret-bottom</span></span></li>
      <li><span><i class="el-icon-caret-top"></i><span class="icon-name">el-icon-caret-top</span></span></li>
      <li><span><i class="el-icon-caret-right"></i><span class="icon-name">el-icon-caret-right</span></span></li>
      <li><span><i class="el-icon-close"></i><span class="icon-name">el-icon-close</span></span></li>
      <li><span><i class="el-icon-d-arrow-left"></i><span class="icon-name">el-icon-d-arrow-left</span></span></li>
      <li><span><i class="el-icon-check"></i><span class="icon-name">el-icon-check</span></span></li>
      <li><span><i class="el-icon-delete"></i><span class="icon-name">el-icon-delete</span></span></li>
      <li><span><i class="el-icon-d-arrow-right"></i><span class="icon-name">el-icon-d-arrow-right</span></span></li>
      <li><span><i class="el-icon-document"></i><span class="icon-name">el-icon-document</span></span></li>
      <li><span><i class="el-icon-d-caret"></i><span class="icon-name">el-icon-d-caret</span></span></li>
      <li><span><i class="el-icon-edit-outline"></i><span class="icon-name">el-icon-edit-outline</span></span></li>
      <li><span><i class="el-icon-download"></i><span class="icon-name">el-icon-download</span></span></li>
      <li><span><i class="el-icon-goods"></i><span class="icon-name">el-icon-goods</span></span></li>
      <li><span><i class="el-icon-search"></i><span class="icon-name">el-icon-search</span></span></li>
      <li><span><i class="el-icon-info"></i><span class="icon-name">el-icon-info</span></span></li>
      <li><span><i class="el-icon-message"></i><span class="icon-name">el-icon-message</span></span></li>
      <li><span><i class="el-icon-edit"></i><span class="icon-name">el-icon-edit</span></span></li>
      <li><span><i class="el-icon-location"></i><span class="icon-name">el-icon-location</span></span></li>
      <li><span><i class="el-icon-loading"></i><span class="icon-name">el-icon-loading</span></span></li>
      <li><span><i class="el-icon-location-outline"></i><span class="icon-name">el-icon-location-outline</span></span>
      </li>
      <li><span><i class="el-icon-menu"></i><span class="icon-name">el-icon-menu</span></span></li>
      <li><span><i class="el-icon-minus"></i><span class="icon-name">el-icon-minus</span></span></li>
      <li><span><i class="el-icon-bell"></i><span class="icon-name">el-icon-bell</span></span></li>
      <li><span><i class="el-icon-mobile-phone"></i><span class="icon-name">el-icon-mobile-phone</span></span></li>
      <li><span><i class="el-icon-news"></i><span class="icon-name">el-icon-news</span></span></li>
      <li><span><i class="el-icon-more"></i><span class="icon-name">el-icon-more</span></span></li>
      <li><span><i class="el-icon-more-outline"></i><span class="icon-name">el-icon-more-outline</span></span></li>
      <li><span><i class="el-icon-phone"></i><span class="icon-name">el-icon-phone</span></span></li>
      <li><span><i class="el-icon-phone-outline"></i><span class="icon-name">el-icon-phone-outline</span></span></li>
      <li><span><i class="el-icon-picture"></i><span class="icon-name">el-icon-picture</span></span></li>
      <li><span><i class="el-icon-picture-outline"></i><span class="icon-name">el-icon-picture-outline</span></span>
      </li>
      <li><span><i class="el-icon-plus"></i><span class="icon-name">el-icon-plus</span></span></li>
      <li><span><i class="el-icon-printer"></i><span class="icon-name">el-icon-printer</span></span></li>
      <li><span><i class="el-icon-rank"></i><span class="icon-name">el-icon-rank</span></span></li>
      <li><span><i class="el-icon-refresh"></i><span class="icon-name">el-icon-refresh</span></span></li>
      <li><span><i class="el-icon-question"></i><span class="icon-name">el-icon-question</span></span></li>
      <li><span><i class="el-icon-remove"></i><span class="icon-name">el-icon-remove</span></span></li>
      <li><span><i class="el-icon-share"></i><span class="icon-name">el-icon-share</span></span></li>
      <li><span><i class="el-icon-star-on"></i><span class="icon-name">el-icon-star-on</span></span></li>
      <li><span><i class="el-icon-setting"></i><span class="icon-name">el-icon-setting</span></span></li>
      <li><span><i class="el-icon-circle-check"></i><span class="icon-name">el-icon-circle-check</span></span></li>
      <li><span><i class="el-icon-service"></i><span class="icon-name">el-icon-service</span></span></li>
      <li><span><i class="el-icon-sold-out"></i><span class="icon-name">el-icon-sold-out</span></span></li>
      <li><span><i class="el-icon-remove-outline"></i><span class="icon-name">el-icon-remove-outline</span></span></li>
      <li><span><i class="el-icon-star-off"></i><span class="icon-name">el-icon-star-off</span></span></li>
      <li><span><i class="el-icon-circle-check-outline"></i><span class="icon-name">el-icon-circle-check-outline</span></span>
      </li>
      <li><span><i class="el-icon-tickets"></i><span class="icon-name">el-icon-tickets</span></span></li>
      <li><span><i class="el-icon-sort"></i><span class="icon-name">el-icon-sort</span></span></li>
      <li><span><i class="el-icon-zoom-in"></i><span class="icon-name">el-icon-zoom-in</span></span></li>
      <li><span><i class="el-icon-time"></i><span class="icon-name">el-icon-time</span></span></li>
      <li><span><i class="el-icon-view"></i><span class="icon-name">el-icon-view</span></span></li>
      <li><span><i class="el-icon-upload2"></i><span class="icon-name">el-icon-upload2</span></span></li>
      <li><span><i class="el-icon-zoom-out"></i><span class="icon-name">el-icon-zoom-out</span></span></li>
    </ul>
  </div>
</template>
<script>
  import { getSongList, getDiscList } from 'api/recommend'
  import { ERR_OK } from 'api/config'
  export default {
    name: 'my-main',
    data () {
      return {
        msg: '',
        discList: [],
        input0: '',
        input1: '',
        input2: '',
        input21: '',
        input22: '',
        input23: ''
      }
    },
    mounted () {
      let me = this
      me._getDiscList()
//      me._getSongList()
    },
    methods: {
      _getDiscList () {
        getDiscList().then((res) => {
          if (res.statusText === ERR_OK) {
            this.discList = res.data
            console.log(res.data)
          }
        })
      },
      _getSongList () {
        getSongList().then((res) => {
          console.log(res.data)
          if (res.code === ERR_OK) {
            this.discList = res.data.list
          }
        })
      }
    }
  }
</script>
<style>
  .mainContent {
    padding-bottom: 30px;
  }

  .el-input {
    width: 30%;
    margin: 5px;
  }

  .icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0;
    border: 1px solid #eaeefb;
    border-radius: 4px;
  }

  .icon-list li:hover {
    color: #5cb6ff;
  }

  .icon-list li {
    float: left;
    width: 16.66%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    transition: color .15s linear;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
  }

  .icon-list li span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    color: #99a9bf;
  }

  .icon-list li .icon-name {
    display: inline-block;
    padding: 0 3px;
    height: 1em;
    color: #5a5e66;
  }

  .icon-list li i {
    display: block;
    font-size: 32px;
    margin-bottom: 15px;
    color: #5a5e66;
  }
</style>
